<style lang="scss" scoped>
    .mshop-address {
        padding: 46px 0;

        .delete-transition {
            transition: max-height .3s ease;
            max-height: 200px;
        }

         .delete-leave {
            max-height: 0;
            opacity: 0;
        }

        .address-item {
            margin-bottom: 5px;
            background-color: white;

            .header {
                display: flex;
                justify-content: space-between;
                font-size: 18px;
                padding: .5em .5em 0 .5em;
            }

            .address {
                font-size: 14px;
                word-break: break-all;
                max-height: 2.8em;
                overflow: hidden;
                padding: .5em;
                box-shadow: 0 1px 0 rgba(0,0,0,.05),0 .5px 0 rgba(0,0,0,.09);
            }

            .footer {
                padding: .5em;
                display: flex;
                justify-content: space-between;
                align-items: center;

                > div {
                    display: inline-block;
                }

                .choose {
                    $circle-rect: 20px;
                    display: flex;
                    align-items: center;

                    .circle {
                        width: $circle-rect;
                        height: $circle-rect;
                        background: url('../../assets/circle.png') no-repeat;
                        background-size: $circle-rect;
                        display: inline-block;
                        padding-right: 4px;
                    }
                    .choosed {
                        background: url('../../assets/circle-choosed.png') no-repeat;
                        background-size: $circle-rect;
                    }
                }

                .buttons {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    span {
                        display: inline-block;
                        padding: .2em 1em;
                        margin: 0 .4em;
                        border: 1px solid #888;
                        border-radius: .3em;

                        &:active {
                            $activeColor: #9E9E9E;
                            background-color: $activeColor;
                            border-color: $activeColor;
                            color: white;
                        }
                    }
                }
            }
        }

        .address-footer {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            text-align: center;
            background-color: #f44336;
            color: white;
            padding: .6em 0;
            z-index: 1;
        }
    }

</style>

<template>
    <div class="mshop-address">
        <div class="address-item" v-for="address in addresss" v-if="!address.delete" transition="delete">
            <div class="header">
                <span>{{ address.name }}</span>
                <span>{{ address.phone }}</span>
            </div>

            <div class="address">
                <span>{{ address.province.name }}</span>
                <span>{{ address.city.name }}</span>
                <span>{{ address.county.name }}</span>
                <span>{{ address.street }}</span>
            </div>

            <div class="footer">
                <div class="choose">
                    <div
                     class="circle"
                     :class="{choosed: address.choose}"
                     @click="do_choose(address)" >
                    </div>
                    <span> 设为默认地址</span>
                </div>

                <div class="buttons">
                    <span v-link="{path: 'edit', query: {id: address.id}, append: true}">编辑</span>
                    <span @click="do_delete(address)">删除</span>
                </div>
            </div>
        </div>

        <div class="address-footer">
            <span v-link="{path: 'edit', append: true}">新增收货地址</span>
        </div>

        <confirm
         :show.sync="show_confirm"
         @on-confirm="confirm_delete"
         title="确认删除"
         cancel-text='取消'
         confirm-text="确认">
         <p style="text-align:center">确认删除当前地址吗?</p>
        </confirm>
    <div>
</template>

<script>
    import addressService from 'services/address'
    import Confirm from 'vux-components/confirm'

    const temp_addresss = [
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
        {id: 1, name: '张三', zip: 200200, phone: '12345678901', street: '上海上海市杨浦区国伟路135号10号楼', choose: true, province: { id: 1, name: '上海'}, city: { id: 1, name: '上海'}, 'county': { id: 1, name: '浦东'}, delete: false},
    ]

    export default {
        data () {return {addresss: [], show_confirm: false, delete_item: false}},
        route: {
            data: () => {
                return addressService
                    .fetch()
                    .then(({data}) => ({ addresss: data}), () => ({ addresss: temp_addresss}));
            }
        },
        components: {
            Confirm
        },
        methods: {
            do_choose (address) {
                if (!address.choose) {
                    addressService.choose(address.id);
                }

                for (const temp of this.addresss) {
                    temp.choose = temp.id === address.id? true : false;
                }
            },
            confirm_delete () {
                if (this.delete_item) {
                    addressService
                        .delete(this.delete_item.id)
                        .then(() => {
                            this.delete_item.delete = true;
                        })
                }
            },
            do_delete (delete_item) {
                this.show_confirm = true;
                this.delete_item = delete_item;
            }
        }
    }
</script>
